<!doctype html>
<html class="no-js fixed-layout">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Monitor</title>
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="assets/css/admin.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar am-topbar-inverse admin-header">
      <ul class="am-avg-sm-1 am-avg-md-3 am-text-center  ">
        <li><a href="./dev-summary.html" style="font-size:22px;font-family: arial, verdana, sans-serif;">设备状态<br/></a></li>
        <li><a href="./dev-control.html" style="font-size:22px;font-family: arial, verdana, sans-serif;">实时控制<br/></a></li>
        <li><a href="./dev-sysinfo.html" style="font-size:22px;font-family: arial, verdana, sans-serif;">系统信息<br/></a></li>
      </ul>
</header>

<div class="am-cf admin-main">

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
        <div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">服务器</div>

            <div class="am-u-sm-8 am-u-md-4 am-text-center">
              <select id="ComIndex" data-am-selected="{btnSize: 'mb'}">
                <option value="option1">COM1</option>
                <option value="option2">COM2</option>
                <option value="option3">COM3</option>
              </select>
            </div>
            <div class="am-u-sm-2 am-u-md-5">
              <button id="OpenCom" value="open" type="button" class="am-btn am-btn-primary am-btn-md">打开</button>
            </div> 
        </div>

        <div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">系统时间</div>
            <div class="demos am-u-sm-8 am-u-md-4 am-text-center">
              <input type="text" value="2000-01-01 00:00" class="am-form-field am-input-md" name="SysDateTime" id="SysDateTime">
            </div>
            <div class="am-u-sm-2 am-u-md-5">
              <button type="button" class="am-btn am-btn-primary am-btn-md">应用</button>
            </div> 
        </div>

        <div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-3 am-text-right">控制器时间</div>
            <div class="am-u-sm-8 am-u-md-4 am-text-center">
              <input type="text" value="2000-01-01 00:00" class="am-form-field am-input-md" name="ControlDateTime" id="ControlDateTime">
            </div>
            <div class="am-u-sm-2 am-u-md-5">
              <button type="button" class="am-btn am-btn-primary am-btn-md">同步</button>
            </div> 
        </div>
        <br/>
      <ul id="ControlMenu" class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
        <li><a id="PumpBoot" href="#" class="am-text-success"><span class="am-icon-btn am-icon-play"></span><br/>启动血泵<br/></a></li>
        <!-- class="am-icon-btn am-icon-file-text" -->
        <li><a href="#" class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>目标转速<br/>308</a></li>
        <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>控制器静音<br/>80082</a></li>
        <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>在线用户<br/>3000</a></li>
      </ul>

<div
  class="am-slider am-slider-default"
  data-am-flexslider="{controlNav: 'thumbnails', directionNav: false, slideshow: false}">
  <ul class="am-slides">
    <li data-thumb="http://s.amazeui.org/media/i/demos/pure-4.jpg?imageView2/0/w/360">
      <img src="http://s.amazeui.org/media/i/demos/pure-4.jpg" /></li>
  </ul>
</div>

    </div>
    <!-- body end -->

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding am-text-center">© 2016.8 苏州园区.</p>
    </footer>
  </div>
  <!-- content end -->

</div>
<!--
<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
-->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--   <script src="assets/js/jquery.1.7.2.min.js"></script>
 -->  <script src="assets/js/jquery.min.js"></script>

  <script src="assets/js/amazeui.min.js"></script>
  <script src="assets/js/app.js"></script>
  <script src="assets/js/qwebchannel.js"></script>
  <script type="text/javascript">

      function open_com_callback(){
          if (jQuery("#OpenCom").val() == "open"){
            jQuery("#OpenCom").val("close");
            jQuery("#OpenCom").text("关闭");
          }else if (jQuery("#OpenCom").val() == "close"){
            jQuery("#OpenCom").val("open");
            jQuery("#OpenCom").text("打开");
          }else{
            alert("操作错误!")
          }        
      }

        $(function () {
          var now = new Date();

          var sys_date = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
          var sys_time = now.getHours()+":"+now.getMinutes();  
                  
          var currYear = (now.getFullYear());  
          var opt={};
          opt.date = {preset : 'date'};
          opt.datetime = {preset : 'datetime'};
          opt.time = {preset : 'time'};
          opt.default = {
            theme: 'android-ics light', //皮肤样式
                display: 'modal', //显示方式 
                mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
                startYear: currYear - 150, //开始年份
                endYear: currYear + 5 //结束年份
          };

        var optDateTime = $.extend(opt['datetime'], opt['default']);
        $("#SysDateTime").mobiscroll(optDateTime).datetime(optDateTime);
        $("#ControlDateTime").mobiscroll(optDateTime).datetime(optDateTime);

        jQuery("#SysDateTime").val(sys_date+' '+sys_time);
        jQuery("#PumpBoot").click(function(){
          jQuery("#PumpBoot").val("ssss");
        });

        jQuery("#OpenCom").click(function(){
          if (jQuery(this).val() == "open"){
            jQuery(this).val("close");
            jQuery(this).text("关闭");
          }else if (jQuery(this).val() == "close"){
            jQuery(this).val("open");
            jQuery(this).text("打开");
          }else{
            alert("操作错误!")
          }
        });

        });
    </script>  
  <script src="assets/js/mobiscroll_002.js" type="text/javascript"></script>
  <script src="assets/js/mobiscroll_004.js" type="text/javascript"></script>
  <link href="assets/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
  <link href="assets/css/mobiscroll.css" rel="stylesheet" type="text/css">
  <script src="assets/js/mobiscroll.js" type="text/javascript"></script>
  <script src="assets/js/mobiscroll_003.js" type="text/javascript"></script>
  <script src="assets/js/mobiscroll_005.js" type="text/javascript"></script>
  <link href="assets/css/mobiscroll_003.css" rel="stylesheet" type="text/css">

</body>
</html>
